<template>
	<view>
		<uv-navbar
			:leftIconColor="navstyle.txtColor"
			:titleStyle="titleStyle"
			:title="navstyle.title"
			:leftIcon="navstyle.leftIcon"
			:bgColor="navstyle.bgColor"
			:fixed="false" 
			@leftClick="leftClick"
			:safeAreaInsetTop="false">
		</uv-navbar>
		<view class="detail">
			<view class="title">我的商品</view>
			<view class="list">
				<view class="headLine">{{sellData.goodsName}}</view>
				<view class="content">
					<view class="left">
						<image class="image" :src="sellData.goodsLogo" mode=""></image>
					</view>
					<view class="right">
						<view class="code">
							<text>会员编号：</text><text>{{sellData.sellerId}}</text>
						</view>
						<view class="name">
							<text>姓名：</text><text>{{sellData.sellerName}}</text>
						</view>
						<view class="tel">
							<text>电话：</text><text>{{sellData.sellerMobile}}</text>
						</view>
						<view class="price">
							<text>价格：</text><text>{{sellData.price}}</text>
						</view>
					</view>
				</view>
				<view class="remark">
					本次交易日共计收款：{{sellData.totalReceive}}
				</view>
			</view>
			<button @click="submitClick" class="exitbtn">确认收款</button>
			<view class="info">打款信息</view>
			<view class="infoDetail">
				<view>{{list.buyerName}}</view>
				<view>{{list.buyerMobile}}</view>
				<view>¥ <text>{{list.pay}}</text></view>
				<view style="display: flex;" @click="openModal(index)">
					<uv-icon color="green" name="checkbox-mark"></uv-icon>
					<button class="proof">凭证</button>
				</view>
					
			</view>
			
		</view>
		<payKeyboard v-if="showKeyBoard" title="Mi安全键盘" @success="enterSuccess" @close="close"></payKeyboard> 
		<uv-modal ref="modal" @confirm="confirm">
			<template slot-content>
				<image :src="pzimage" mode=""></image>
			</template>
		</uv-modal>
	</view>
</template>

<script>
	import {confirmDetail,confirmOrder} from '@/api/warehouse.js';
	import payKeyboard from '@/components/mi-payKeyboard/mi-payKeyboard.vue';
	export default{
		components: { payKeyboard },
		onLoad(options) {
			this.orderId = options.orderId;
			confirmDetail({orderId:this.orderId}).then(response => {
				console.log(response,4444)
				this.sellData = response.data;
				this.list =response.data.list
				this.pzimage= this.list.reception
			});
			
		},
		data(){
			return{
				navstyle: {
					title: "确认收款",
					txtColor: "#333333",
					bgColor: "#FFFFFF",
					leftIcon: "arrow-left"
				},
				titleStyle: {
					fontWeight: 700
				},
				sellData:{},
				list:{},
				pzimage:'',
				showKeyBoard:false,
			}
		},
		methods:{
			leftClick() {
				uni.reLaunch({
				  url: '/pages/warehouse/seller' // 替换成上一页的路径
				});
			},
			openModal(index) {
				this.$refs.modal.open();
				// this.pzimage= this.list.reception
			},
			confirm() {
				console.log('点击确认按钮');
			},
			// 输入正确的回调
			enterSuccess(password) {
				confirmOrder({
					orderId:this.orderId,
					paypass:password,
				}).then(response=>{
					if(response.code == 1){
						uni.showToast({
							title: response.msg,
							duration: 1500
						});
						setTimeout(()=>{
							uni.reLaunch({
							  url: '/pages/warehouse/seller' // 替换成上一页的路径
							});
												
						},2000)
					}else{
						// console.log(response.msg,222)
						uni.showToast({
							title: response.msg,
							duration: 2000
						});
					}
				})
				this.showKeyBoard = false
			},
			// 点击[取消] 关闭输入框 的回调
			close(){
				this.showKeyBoard = false
			},
			submitClick(){
				if(!this.pzimage){
					uni.showToast({
						title: "卖家还未上传凭证",
						icon: "success",
						duration: 2000
					});
					return
				}
				this.showKeyBoard = true;
				
			}
		}
	}
</script>

<style>
	.detail{
		width: 100%;
		height: 93vh;
		background-size: 100% 100%;
		background-repeat: no-repeat;
		background-image: url(/static/img/user/longing.jpg);
		overflow: hidden;
		background-color: rgba(0, 0, 0, .6);
	}
	.title{
		margin-top: 20px;
		text-align: center;
		font-size: 18px;
		color: #fff;
		margin-bottom: 40px;
	}
	.list{
		width: 80%;
		margin: 0 auto;
		padding: 20px 20px 5px;
		border-radius: 10px;
		background-color: #fff;
	}
	.headLine{
		text-align: center;
		font-size: 16px;
		padding-bottom: 20px;
	}
	.content{
		display: flex;
		justify-content: center;
	}
	.left image{
		width: 140px;
		height: 100px;
		border-radius: 10px;
	}
	.right{
		margin-left: 20px;
	}
	.code,.name,.tel{
		font-size: 12px;
		font-weight: bold;
		margin-bottom: 5px;
	}
	.price{
		font-size: 12px;
		font-weight: bold;
		color: #E77F7E;
	}
	.remark{
		margin-top: 20px;
		text-align: center;
		color: #6E5C79;
	}
	.exitbtn{
		width: 35%;
		border-radius: 50px;
		background: linear-gradient(135deg, #d66c6b, #ed6266);
		font-size: 14px;
		margin: 30px auto 0 auto;
		color: #fff;
		padding: 3px 0;
	}
	.info{
		text-align: center;
		font-size: 18px;
		color: #fff;
		padding: 30px 0;
	}
	.infoDetail{
		color: #fff;
		display: flex;
		width: 90%;
		margin: 0 auto;
		border-radius: 5px;
		justify-content: space-around;
		padding: 10px;
		border: 1px solid #fff;
	}
	.proof{
		background: linear-gradient(135deg, #d66c6b, #ed6266);
		font-size: 14px;
		color: #fff;
		padding: 5px;
		height: 25px;
		line-height: 16px;
	}
	
</style>